<template>
    <div class="service-container">
        <section class="search-bar">
            <search-bar></search-bar>
        </section>

        <div class="service-mesh">
            <template v-for="item in services.services">
                <service-mesh
                    :service="item.serviceName"
                    :instance="item.instanceNumber"
                    :status="item.serviceStatus"
                    :up="item.upNumber || 0"
                    :down="item.downNumber || 0"
                    :offline="item.offlineNumber || 0"
                    :key="item.serviceName">
                </service-mesh>
            </template>
        </div>
    </div>
</template>

<script>
    import SearchBar from '../../components/search-bar/SearchBar.vue';
    import ServiceMesh from '../../components/service-mesh/ServiceMesh.vue';

    export default {
        name: 'Services',
        components: {
            SearchBar,
            ServiceMesh,
        },
        computed: {
            services() {
                return this.$store.state.services;
            },
        },
        mounted() {
            this.$store.dispatch('services/loadServices');
        },
    };
</script>

<style lang="scss" scoped>
    .service-container {
        .search-bar {
            padding: 10px 12px;
            background: #FFF;
            border-radius: 8px;
            box-shadow: 0 0 10px 0 rgb(226, 232, 237, .5);
        }

        .service-mesh {
            margin-top: 24px;
        }
    }
</style>
